<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>task0001</title>
	<link rel="stylesheet" href="task0001.css" />
</head>
<body>
<!-- 一个一级标题，内容是你的Github账号 -->
<h1>Beginner-dotcom</h1>
<!-- 一个无序列表，包括2个项目，里面每一个项目是一个链接，分别链接到task0001.html以及你的微博（或其他什么网站） -->
<ul>
<li><a href="task0001.html">task0001</a></li>
<li><a href="#">blog</a></li>
</ul>
<!-- 一个二级标题，内容随意（不能违法、反动、色情等） -->
<h2>这是二级标题</h2>
<!-- 一个段落，内容随意（不能违法、反动、色情等） -->
<p>这是一个段落，内容随意；这是一个段落，内容随意；这是一个段落，内容随意；</p>
<!-- 一个图片（不能违法、反动、色情等）。 -->
<img src="task0001_1.jpg" alt="图片" />

<!-- 用两种方法来实现一个背景色为红色、宽度为960px的<DIV>在浏览器中居中 -->
<div class="red">123</div>
<!-- 有的圆角矩形是复杂图案，无法直接用border-radius，请在不使用border-radius的情况下实现一个可复用的高度和宽度都自适应的圆角矩形 示例 -->
<!-- 用两种不同的方法来实现一个两列布局，其中左侧部分宽度固定、右侧部分宽度随浏览器宽度的变化而自适应变化 示例 -->
<!-- 用两种不同的方式来实现一个三列布局，其中左侧和右侧的部分宽度固定，中间部分宽度随浏览器宽度的变化而自适应变化 -->
<!-- 实现一个浮动布局，红色容器中每一行的蓝色容器数量随着浏览器宽度的变化而变化  -->
index.html：对应task0001_1及task0001_1_marked设计稿
blog.html：对应task0001_2及task0001_2_marked设计稿
gallery.html：对应task0001_3及task0001_3_marked设计稿
about.html：对应task0001_4及task0001_4_marked设计稿
</body>
</html>